<template>
	<view class="m-card-image-view">
		<eui-file-picker ref="uploadRef" :disabled="props.disabled" :autoUpload="props.autoUpload" :limit="props.limit"
			:disablePreview="props.disablePreview" :delIcon="props.delIcon" :mode="props.mode" v-model="fileList"
			:fileMediatype="props.fileMediatype" :readonly="props.readonly" :return-type="returnType"
			:file-extname="props.fileExtname" :title="props.title" :list-styles="props.listStyles"
			:image-styles="mergedProps.imageStyles" :sizeType="props.sizeType" :sourceType="props.sourceType"
			:provider="props.provider" @select="selectPic" @delete="deletePic">
			<view class="m-image-btn">
				<view class="m-image-view" />
				<text class="m-image-text">上传照片</text>
			</view>
		</eui-file-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref, watchEffect,computed } from 'vue'
	import useSaveBill from '@/hooks/useSaveBill';
	import useUpload from '@/hooks/useUpload';
	import Guid from '../common/guid';
	import useService from '@/hooks/useService';

	const props = defineProps<{
		fileId ?: String;
		fileClass ?: String;
		modelValue ?: [Object];
		value ?: [Object];
		disabled ?: Boolean;
		autoUpload ?: Boolean;
		limit ?: [Number, String];
		disablePreview ?: Boolean;
		delIcon ?: Boolean;
		fileMap ?: () => Promise<{
			fileId : string;
			fileClass : string;
		}>;
		mode ?: String;
		fileMediatype ?: String;
		readonly ?: Boolean;
		returnType ?: String;
		fileExtname ?: [Object, String];
		title ?: String;
		listStyles ?: Object;
		imageStyles ?: Object;
		sizeType ?: Object;
		sourceType ?: Object;
		provider ?: String;
		prefix ?: string;
		serviceName ?: string;
		customFetchUniqueKey ?: string;
		customFetchMethodName ?: string;
	}>();
	const style = {
				"height": '200rpx',	// 边框高度
				"width": '200rpx',	// 边框宽度
				"border": {
					"color": "#EEEEEE",
					"width": "1rpx",
					"style": "dashed",
					"radius": "10rpx"
				}
			}
	const mergedProps = computed(() => {
		return {
			imageStyles: props.imageStyles || style
		};
	});
	const service = useService({ prefix: props?.prefix || "apiApi" });
	const billId = ref('');
	const fileList = ref([])
	const { upload, remove, fetchFile } = useUpload(props?.prefix ? { prefix: props?.prefix } : {});

	const fetchFileList = async (fileId : string, fileClass : string) => {
		if (fileId && fileClass) {
			const fetchProxy = { customFetchUniqueKey: props?.customFetchUniqueKey, customFetchMethodName: props?.customFetchMethodName };
			const result = await fetchFile(fileId, fileClass, fetchProxy);
			const baseUrl = service.getBaseUrl(props?.serviceName);
			fileList.value = result.map(x => {
				return {
					name: x.c_file_name,
					extname: x.c_file_ext,
					url: baseUrl + '/File/DownLoadFile/' + x.c_guid,
					c_guid: x.c_guid
				}
			})
		}
	};

	watchEffect(() => {
		console.log('watchEffect', props.fileId)
		if (props.fileId && props.fileClass) {
			fetchFileList(props.fileId, props.fileClass);
		}
	});

	const selectPic = async (e) => {
		const lists = e.tempFiles || [];
		let { fileId, fileClass } = props;
		if (!fileId && props.fileMap) {
			const result = await props.fileMap();
			fileId = result.fileId;
			fileClass = result.fileClass;
		}
		const extendInfo = JSON.stringify({
			BillId: fileId,
			BillType: fileClass,
		});
		for (let i = 0; i < lists.length; i++) {
			const file = lists[i];
			const result = await upload({
				file: {
					ext: file.extname,
					url: file.url,
					name: file.name,
					type: file.fileType,
					guid: Guid.NewGuid().ToString()
				},
				uploadUserNo: "",
				extendInfo: extendInfo,
			});
		}
		await fetchFileList(fileId, fileClass);
	}
	const deletePic = async (e) => {
		//console.log('deletePic',e)
		let { fileId, fileClass } = props;
		const fileguid = fileList.value[e.index].c_guid;
		//console.log('fileguid',fileguid)
		await remove(fileguid);
		await fetchFileList(fileId, fileClass)
	}
</script>

<style lang="scss">
	@import '../main.scss';

	// .m-card-image-view {
	// 	display: flex;
	// 	flex-direction: row;
	// 	width: 100%;
	// 	background: $uni-bg-color-inverse;
	// 	padding: 10rpx;
	// 	box-sizing: border-box;
	// }

	.m-image-btn {
		width: 100%;
		height: 100%;
		background: rgba(238, 238, 238, 0.25);
		border-radius: 10rpx;
		border: 1rpx dashed #EEEEEE;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.m-image-view {
		width: 40rpx;
		height: 37rpx;
		align-self: center;
		background-image: url(../static/img/imgUpload.png);
		background-size: 100% 100%;
	}

	.m-image-text {
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		font-size: $uni-font-size-level7;
		color: $uni-text-color-primary;
		line-height: 28rpx;
		text-align: right;
		font-style: normal;
		margin-top: 7rpx;
	}
</style>